<template>
	<el-form
		ref="loginForm"
		:rules="loginRules"
		:model="loginForm"
		status-icon
		label-width="0"
		size="large"
	>
		<el-form-item prop="mobile">
			<el-input
				v-model="loginForm.mobile"
				auto-complete="off"
				placeholder="请输入手机号码"
				prefix-icon="el-icon-iphone"
			>
			</el-input>
		</el-form-item>
		<el-form-item prop="code">
			<el-input
				v-model="loginForm.code"
				auto-complete="off"
				placeholder="请输入验证码"
				prefix-icon="el-icon-duanxin"
			>
				<template #append>
					<span :class="[{display:msgKey}]" class="msg-text" @click="handleSend">{{ msgText }}</span>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item>
			<el-button
				round
				type="primary"
				class="login-submit"
				@click="handleLogin"
				style="width: 100%;">登录
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	const MSGINIT = "发送验证码",
		MSGSCUCCESS = "${time}秒后重发",
		MSGTIME = 60;
	import {mobile} from "@/utils/regular";

	export default {
		name: "Codelogin",
		data() {
			const validatePhone = (rule, value, callback) => {
				if (!mobile.test(value)) {
					callback(new Error('手机号格式错误'));
				} else {
					callback();
				}
			};
			const validateCode = (rule, value, callback) => {
				if (value.length !== 6) {
					callback(new Error("请输入6位数的验证码"));
				} else {
					callback();
				}
			};
			return {
				msgText: MSGINIT,
				msgTime: MSGTIME,
				msgKey: false,
				loginForm: {
					mobile: "",
					code: "",
				},
				loginRules: {
					mobile: [{required: true, trigger: "blur", validator: validatePhone}],
					code: [{required: true, trigger: "blur", validator: validateCode}],
				},
			};
		},
		computed: {},
		methods: {
			handleSend() {
				// 判断是否可以发送（时间限制）
				if (this.msgKey) return;
				// 发送验证码
				this.$refs.loginForm.validateField("mobile", (valid) => {
					if (!valid) {
						this.$API.auth.sendCode.get({phone: this.loginForm.mobile}).then((res) => {
							if (res.code === 200) {
								this.$message.success("验证码发送成功");
								this.timeCacl();
							} else {
								this.$message.error(res.errorMsg);
							}
						});
					}
				});
			},
			async handleLogin() {
				const res = await this.$API.auth.loginByCode.post({
					phone: this.loginForm.mobile,
					verificationCode: this.loginForm.code
				})
				//获取菜单
				let menu = null
				menu = await this.$API.system.menu.myMenus.get()
				console.log(menu)
				if (res.code === 200) {
					this.$TOOL.data.set('TOKEN', res.data.token)
					this.$TOOL.data.set("MENU", menu.data.menu)
					this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
				} else {
					console.log(res)
					this.islogin = false
					this.$message.warning(res.errorMsg)
					return false
				}
				this.$router.replace({
					path: '/'
				});
				this.$message.success("Login Success 登录成功")
				this.islogin = false
			},
			timeCacl() {
				// 计时避免重复发送
				this.msgText = MSGSCUCCESS.replace("${time}", this.msgTime);
				this.msgKey = true;
				const time = setInterval(() => {
					this.msgTime--;
					this.msgText = MSGSCUCCESS.replace("${time}", this.msgTime);
					if (this.msgTime === 0) {
						this.msgTime = MSGTIME;
						this.msgText = MSGINIT;
						this.msgKey = false;
						clearInterval(time);
					}
				}, 1000);
			},
		},
	};
</script>

<style>
	.msg-text {
		display: block;
		width: 60px;
		font-size: 12px;
		text-align: center;
		cursor: pointer;
	}

	.msg-text.display {
		color: #ccc;
	}
</style>
